<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n()

const props = defineProps<{
  tableData: {
    currency: string
    count: number
    validBet: number
    win: number
    detail: any
  }[]
}>()

const emit = defineEmits(['detail'])


const tableData = computed(() => {
  return props.tableData
})


function goDetail(detail: any){
  emit('detail', detail)
}

</script>

<template>
  <div class="statistics-table">
    <div class="table-header">
        <span class="col-type">{{ t('currency') }}</span>
      <span class="col-count">{{ t('betCount') }}</span>
      <span class="col-bet">{{ t('validBet') }}</span>
      <span class="col-win">{{ t('winLose') }}</span>
    </div>
      <div class="table-row" v-for="(row, idx) in tableData" :key="idx" v-if="tableData.length > 0" @click="goDetail(row.detail)">
         <AppCurrencyIcon
               :show-name="false"
               :currency-type="row.currency as any"
               icon-align="left"
               class="ml-2 w-4 h-4 rounded-full"
             />
             <span class="col-count">{{ row.count }}</span>
             <span class="col-bet">{{ row.validBet }}</span>
             <span class="col-win" :class="{'win': row.win > 0, 'lose': row.win < 0}">
               {{ row.win > 0 ? '+' : '' }}{{ row.win.toFixed(2) }}
             </span>
      </div>
      <AppNoData v-else/>
  </div>
</template>

<style scoped>
.statistics-table {
  background: #292D2E;
  padding: 0;
}
.table-header, .table-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  font-size: 14px;
}

.table-row:nth-child(even) {
  background: linear-gradient(0deg, #3A4142 0%, #3A4142 100%), #323738;
}
.col-type {
  justify-content: flex-start !important;
}
.col-count, .col-bet {
  justify-content: center !important;
}
.col-win {
  justify-content: flex-end !important;
}
.table-header span, .table-row span {
  display: flex;
  align-items: center;
}
.win {
  color: #24EE89;
  font-weight: bold;
}
.lose {
  color: #B3BEC1;
}
</style>
